<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>月考核</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-decoration: none;
        }
        body{
            background-color: #000000;
        }
        /* 头部分 */
        .head {
            width: 100%;
            background-color: rgb(75, 72, 72);
            /* background: rgba(var(--dsw-layer-1-rgb), 1);
            box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px, rgba(0, 0, 0, 0.08) 0px 4px 12px; */
            /* background: #78cfe5; */
            height: 50px;
            
        }
        /* 头左 */
        .head .sz li {
            
            font-size: 20px;
            padding-top: 10px;
            float: left;
            display: inline;
            color: rgb(149, 151, 154);
            width: 80px;
        } 
        #sdd {
             /* border: 2px solid #c66464; */
            /* border-radius: 10px;  */
            display: none;          
        }
        #sdd li{
            background-color: rgb(51, 51, 51);           
        }
        /* 头右 */
        .head .sy li {
            font-size: 20px;
            padding-top: 10px;
            float: right;
            display: inline;
            color: rgb(149, 151, 154);
            width: 80px;
        }
        .head #syzd {
            display: none;
        }
        #syzd li{
            background-color: rgb(51, 51, 51);
            width: 90px;
            font-size: 10px;
            text-align: center;
        }
        .xb{
            width: 1000px;           
            margin: 12px auto 0px;          
            background-color: rgb(75, 72, 72);
            height: 1500px;
        }
        .xb #tz{
            float: left;
            width: 734px;
            height: 100%;
            background: #5ba49d;
            padding-bottom: 10px;
        }
        .xb #ty {
            float: right;
            width: 256px;
            height: 100%;
            background: #a0a89f;
        }
        .xb #tz #t1{
            width: 100%;
            height: 250px;
            background: #722f2f;
            float: left;         
        }
        .xb #tz #t2{
            width: 100%;
            height: 125px;
            background: #9a9292;
            float: left; 
        }
        .xb #tz #t2 #datu{
            width: 100%;
        }
        .xb #tz #t3{
            width: 100%;
            height: 250px;
            background: #4f3f6b;
            float: left; 
        }
    
        .xb #tz #t3 .slider{
            width: 100%px;
            height: 250px;
            overflow: hidden;
        }
        .xb #tz #t3 .slider-wrapper{
            width: 100%;
            height: 200px;
        }
        .xb #tz #t3 .slider-wrapper img{
            width: 100%;
            height:100%;
            display: block;
        }
        .xb #tz #t3 .slider-footer{
            height: 50px;
            background-color: rgb(192, 167, 28);
            padding: 12PX 12PX 0 12PX;
            /* 相 */
            position: relative;
        }
        .xb #tz #t3 .slider-footer .toggle{
            /* 绝 */
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }
        .xb #tz #t3 .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgb(102, 161, 193);
            color: blue;
            border-radius: 4px;
            cursor: pointer;
        }
        .xb #tz #t3 .slider-footer .toggle button:hover{
            background: rgb(238, 100, 8);
        }
        .xb #tz #t3 .slider-footer p{
            margin: 0;
            color: blueviolet;
            font-size: 18px;
            margin-bottom: 10px;
        }
        .xb #tz #t3 .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }
        .xb #tz #t3 .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }
        .xb #tz #t3 .slider-indicator li.active{
            width: 12px;
            height: 12px;
            opacity: 1;
        }

    </style>
</head>
<body>
    
    <div class="head">
        <div class="sz">
            <ul>
                <li><img src="https://static.leetcode.cn/cn-mono-assets/production/assets/logo-light-cn.7c8374e7.svg" alt="logo" class="css-56tabg-DarkImg eewwj121"></li>
                <li><a href="https://leetcode.cn/leetbook/">学习</a></li>
                <li><a href="https://leetcode.cn/problemset/all/">题库</a></li>
                <li><a href="https://leetcode.cn/contest/">竞赛</a></li>
                <li><a href="https://leetcode.cn/circle/?query=&page=1">讨论</a></li>
                <li><a href="">求职</a></li>
                <!-- 商店 -->
                <li class="sd">
                    <p id="shangdian">商店 ⬇</p>  
                    <ul id="sdd">
                        <li style="color: goldenrod;">精品商场</li>
                        <li style="color: goldenrod;">力控周边</li>
                        <li style="color: goldenrod;">净瓶会员</li>
                    </ul>              
                </li>
        
            </ul>
        
        <div class="sy">
            <ul>
                <li id="sy1">🟤</li>
                <li><a href="https://leetcode.cn/problems/flower-planting-with-no-adjacent/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="1em" height="1em" fill="currentColor"><path fill-rule="evenodd" d="M7.19 1.564a.75.75 0 01.729.069c2.137 1.475 3.373 3.558 3.981 5.002l.641-.663a.75.75 0 011.17.115c1.633 2.536 1.659 5.537.391 7.725-1.322 2.282-3.915 2.688-5.119 2.688-1.177 0-3.679-.203-5.12-2.688-.623-1.076-.951-2.29-.842-3.528.109-1.245.656-2.463 1.697-3.54.646-.67 1.129-1.592 1.468-2.492.337-.895.51-1.709.564-2.105a.75.75 0 01.44-.583zm.784 2.023c-.1.368-.226.773-.385 1.193-.375.997-.947 2.13-1.792 3.005-.821.851-1.205 1.754-1.282 2.63-.078.884.153 1.792.647 2.645C6.176 14.81 7.925 15 8.983 15c1.03 0 2.909-.366 3.822-1.94.839-1.449.97-3.446.11-5.315l-.785.812a.75.75 0 01-1.268-.345c-.192-.794-1.04-2.948-2.888-4.625z" clip-rule="evenodd"></path></svg></a></li>
                <li><a href=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" class="css-kp02qe-Svg ea8ky5j0"><path fill-rule="evenodd" d="M6.204 15.817a8.872 8.872 0 01-.066.115h11.724a8.535 8.535 0 01-.066-.115c-.92-1.627-1.463-3.806-1.463-6.6 0-2.279-1.932-4.142-4.333-4.142-2.401 0-4.333 1.863-4.333 4.143 0 2.793-.543 4.972-1.463 6.6zM20 17.932H4c-.998 0-1.38-1.301-.54-1.841.201-.13.586-.522 1.003-1.258.746-1.32 1.204-3.158 1.204-5.615 0-3.401 2.843-6.143 6.333-6.143s6.333 2.742 6.333 6.143c0 2.457.458 4.296 1.204 5.615.417.736.802 1.128 1.004 1.258.84.54.457 1.841-.541 1.841zm-7.063 1.346a1 1 0 111.714 1.031A3.09 3.09 0 0112 21.79a3.09 3.09 0 01-2.651-1.48 1 1 0 011.714-1.032c.188.314.545.512.937.512s.748-.198.937-.512z" clip-rule="evenodd"></path></svg></a></li>
                <li><p id="syz" style="color: dimgray;background-color: #000000;">中</p>
                    <ul id="syzd">
                        <li style="color: rgb(147, 147, 147);">题目以中文显示</li>
                        <li style="color: rgb(104, 104, 104);">题目以英文显示</li>
                    </ul>    
                </li>
                <li>1</li>
                <li>1</li>
                <li>2</li>
            </ul>
        </div>
        
    <!-- 下部 -->
    <div class="xb">
        <div id="tz">
            <div id="t1">
                <div id="h1"><div class="h11"><a class="h111" href="/circle/discuss/6eHwt1/">新学习计划｜助力春季编程赛</a><span class="h112">热议中</span></div></div><p>📢📢📢

                    还在为如何在开始编程而感到困扰和困惑？自己制定学习计划进度难以掌控？还时常游离在各个 GitHub 仓库中找适合的题单？
                    🎯 我们提供定制化的学习体验，让你掌握自己的进度，逐步提升编程技能。加入 学习计划，让我们成为你编程旅程中的得力助手。</p>
                <div id="h2"></div>
            </div>
            <!-- 大图 -->
            <div id="t2">
                <img id="datu" src="./tu/Screenshot 2023-04-15 212912.png" alt="">
            </div>
            <!-- 轮播图 -->
            <div id="t3">
                <div class="slider">
                    <div class="slider-wrapper">
                        <img src="./tu/Screenshot 2023-04-15 213248.png" alt="">
                    </div>
                    <div class ="slider-footer">
                        <p>特斯拉</p>
                         <ul class="slider-indicator">
                            <!-- 小点亮 -->
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                         </ul>
                         <div class="toggle">
                            <button class="prev"><</button>
                            <button class="next">></button>
                         </div>
                    </div>
                </div>
            </div>
            <!-- 待定 -->
            <div id="t4"></div>
        </div>


        <div id="ty">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>


    <script>
        // 上左部分
        const sdd = document.querySelector('#sdd')
        const shangdian =document.querySelector('#shangdian')

        shangdian.addEventListener('mouseenter',function(){
            sdd.style.display = 'block'
        })
        shangdian.addEventListener('mouseleave',function(){
            sdd.style.display = 'none'
        })
        // 上右部分
        const syz = document.querySelector('#syz')
        const syzd = document.querySelector('#syzd')

        syz.addEventListener('mouseenter',function(){
            syzd.style.display = 'block'
        })
        syz.addEventListener('mouseleave',function(){
            syzd.style.display = 'none'
        })
      

        const sliderdata = [
            {urt:'./tu/Screenshot 2023-04-15 213248.png',title:'特斯拉',coloe:'rgb(100,20,30)'},
            {urt:'./tu/Screenshot 2023-04-15 213340.png',title:'腾讯',coloe:'rgb(50,20,150)'},
            {urt:'./tu/Screenshot 2023-04-15 213347.png',title:'志杰跳动',coloe:'rgb(0,200,230)'},
            {urt:'./tu/Screenshot 2023-04-15 213354.png',title:'shein',coloe:'rgb(10,20,30)'},
            {urt:'./tu/Screenshot 2023-04-15 213402.png',title:'亚马逊',coloe:'rgb(0,200,30)'},
            {urt:'./tu/Screenshot 2023-04-15 213413.png',title:'苹果',coloe:'rgb(10,20,250)'}
        ]
        const next = document.querySelector('.next')
        const prev = document.querySelector('.prev')
        let i = 0
        let img = document.querySelector('.slider-wrapper img')
        let p = document.querySelector('.slider-footer p')
        let c = document.querySelector(`.slider-indicator li:nth-child(${i+1})`)
        let color = document.querySelector('.slider-footer')
        const dai = document.querySelector('.slider')
        // 下一张按钮
        next.addEventListener('click',function(){             
            i++ 
            i = i>=sliderdata.length?0:i
            // 图片
            img.src = sliderdata[i].urt
            // 文字
            p.innerHTML = sliderdata[i].title
            // 底颜色
            color.style.backgroundColor = sliderdata[i].coloe
            // 小点
            document.querySelector('.active').classList.remove('active')
            document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
            
        })
        // 上一张按钮
        prev.addEventListener('click',function(){
            i--
            i = i<0?sliderdata.length:i
            // 图片
            img.src = sliderdata[i].urt
            // 文字
            p.innerHTML = sliderdata[i].title
            // 底颜色
            color.style.backgroundColor = sliderdata[i].coloe
            // 小点
            document.querySelector('.active').classList.remove('active')
            document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
            
        })
    </script>
</body>
</html>